"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"

export default function ProfilePage() {
  // This would typically come from an API or auth context
  const user = {
    name: "张三",
    studentId: "20240001",
    college: "计算机科学与技术学院",
    major: "软件工程",
    grade: "2024级",
    email: "zhangsan@example.com",
    phone: "138****1234"
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">个人信息</h1>
        <p className="text-muted-foreground">查看和管理您的个人资料</p>
      </div>
      
      <Separator />
      
      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>基本信息</CardTitle>
            <CardDescription>您的个人基础信息</CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="flex justify-between py-1">
              <span className="text-muted-foreground">姓名</span>
              <span className="font-medium">{user.name}</span>
            </div>
            <div className="flex justify-between py-1">
              <span className="text-muted-foreground">学号</span>
              <span className="font-medium">{user.studentId}</span>
            </div>
            <div className="flex justify-between py-1">
              <span className="text-muted-foreground">学院</span>
              <span className="font-medium">{user.college}</span>
            </div>
            <div className="flex justify-between py-1">
              <span className="text-muted-foreground">专业</span>
              <span className="font-medium">{user.major}</span>
            </div>
            <div className="flex justify-between py-1">
              <span className="text-muted-foreground">年级</span>
              <span className="font-medium">{user.grade}</span>
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardHeader>
            <CardTitle>联系方式</CardTitle>
            <CardDescription>您的联系信息</CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="flex justify-between py-1">
              <span className="text-muted-foreground">电子邮箱</span>
              <span className="font-medium">{user.email}</span>
            </div>
            <div className="flex justify-between py-1">
              <span className="text-muted-foreground">手机号码</span>
              <span className="font-medium">{user.phone}</span>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
} 